/* 页面的最底部,在静态页面执行后再执行 */
/* document整个文档，添加了一个时间监听 */
/* 首要渲染界面 html+css,不需要js参与 */
/* 文档加载完后在执行 */
// DOM文档结构
// script会阻塞HTML的下载
document.addEventListener('DOMContentLoaded',function(){
    //页面加载完后在执行
    //可以获得页面元素，添加事件监听器等
    //添加事件监听
    function playSound(event){
        //  事件对象,在事件发生时会给回调函数
        //  keyCode按下键的编码

        console.log(event.keyCode,'///////////')
        let keyCode = event.keyCode;
       let element = document.querySelector('.key[data-key="'+ keyCode +'"]');
        //
        console.log(element);
        // 动态DOM编程
        element.classList.add('playing');
    }
    //事件监听触发回调函数
    window.addEventListener('keydown', playSound)
});